{include file="public/layout" /}
{include file="gzh/header" /}
{load href="__PUBLIC__/plugins/Ueditor/ueditor.config.js" /}
{load href="__PUBLIC__/plugins/Ueditor/ueditor.all.min.js" /}
{load href="__PUBLIC__/plugins/Ueditor/lang/zh-cn/zh-cn.js" /}
<link href="__SKIN__/css/gzh/wx_graphic_message.css?v={$version}" rel="stylesheet" type="text/css" />
<script>
    var ueditor_url = "{:url('Ueditor/index',array('savepath'=>'allimg'))}";
</script>

<body class="bodystyle" style="overflow-y: scroll; cursor: default; -moz-user-select: inherit;">
<div id="append_parent"></div>
<div id="ajaxwaitid"></div>
{include file="canal/left" /}
<div class="page min-hg-c-10" style="min-width:auto;margin-left:100px;">

    <div class="fixed-bar">
        <div class="item-title">
            <a class="back_xin" href="{:url('Gzh/material_list_pictext')}" title="返回"><i class="iconfont e-fanhui"></i></a>
            <div class="subject">
                <h3>编辑图文素材</h3>
                <h5></h5>
            </div>
        </div>
    </div>
    <form class="form-horizontal" id="post_form" action="" method="post" enctype="multipart/form-data">
        <div class="ncap-form-default">
            <div id="graphic_message">
                <div class="graphic-message"><img src="__SKIN__/images/gzh/mobile_head.png">
                    <ul class="graphic-message-list">
                        {volist name="$info" id="vo"}
                        <li class="li{$key} {eq name='$key' value='0'}on{/eq}" data-n="{$key}" onclick="change_li(this,{$key});">
                            <div class="div_content" {eq name='$key' value='0'} style="margin: unset;" {/eq}>
                                {notempty name="$vo.litpic"}
                                    <img src="{$vo.litpic}" alt="">
                                {else/}
                                    <div class="empty-img empty-img{$key}">
                                        <span class="empty-hint">
                                            {eq name="$key" value="0"}
                                            封面图片
                                            {else/}
                                            缩略图
                                            {/eq}
                                        </span>
                                    </div>
                                {/notempty}
                                <div class="mask-layer"></div>
                                <h4 class="title"><span id="show_title{$key}">{$vo.title}</span></h4>
                            </div>
                            <div class="action">
                                <span class="edit" onclick="change_li(this,{$key});">编辑</span>
                                {neq name='$key' value='0'}
                                <span class="delete" onclick="del_li(this,{$key});">删除</span>
                                {/neq}
                            </div>
                        </li>
                        {/volist}
                    </ul>
                    <div class="add-graphic-message">
                        <h4><a href="javascript:void(0);" id="add-new-item">新增</a></h4>
                    </div>
                    <div class="bottom-botton">
                        <span class="layui-btn" onclick="formSubmit();">保存</span>
                    </div>
                </div>

                {volist name="$info" id="vo"}
                <div class="{neq name='$key' value='0'}none{/neq} editor-box editor-box_{$key}">
                    <input type="hidden" name="data[{$key}][id]" value="{$vo.id}">
                    <div class="editor-title">
                        <label>标题<span class="prompt">（必填）</span> </label>
                        <input id="title{$key}" placeholder="请在这里输入标题" maxlength="64" class="layui-input"
                               name="data[{$key}][title]" oninput="inputChange(this,{$key});" value="{$vo.title}">
                    </div>

                    <div class="editor-author">
                        <label>作者<span class="prompt">（选填）</span></label>
                        <input id="author{$key}" placeholder="请输入作者" maxlength="16" class="layui-input"
                               name="data[{$key}][author]" value="{$vo.author}">
                    </div>

                    <div class="editor-cover">
                        <label>封面<span class="prompt">（图片建议尺寸：900 x 500像素 必填）</span></label>
                        <div class="layui-input-block img-upload-wx">
                            <div class="upload-img-block">
                                <!-- 上传图片后下面类判断加hover -->
                                <div class="upload-img-box upload-img-box{$key} {notempty name='$vo.litpic'} hover {/notempty}" onclick="GetUploadify(1,'','allimg','call_back_{$key}')">
                                    <div id="uploadImg" class="upload-default">
                                        <div id="preview_uploadImg{$key}" class="preview_img">
                                            {notempty name="$vo.litpic"}
                                            <img src="{$vo.litpic}" class="img_prev">
                                            {else/}
                                            <div class="upload"><i class="iconfont iconshangchuan"></i><p>点击上传</p></div>
                                            {/notempty}
                                        </div>
                                    </div>
                                    <input class="layui-upload-file" type="file" accept="" name="file">
                                    <div class="operation">
                                        <div>
                                            <i title="编辑" onclick="GetUploadify(1,'','allimg','call_back_{$key}')" class="layui-icon layui-icon-edit js-replace" style="margin-right: 20px;"></i>
                                            <i title="删除" onclick="del_litpic(this,{$key})" class="layui-icon layui-icon-delete js-delete"></i>
                                        </div>
                                    </div>
                                    <input type="hidden" name="data[{$key}][litpic]" id="litpic{$key}" value="{$vo.litpic}">
                                </div>
                            </div>
                        </div>
                        <label for="show_cover_pic" class="editor-msg-label">
                            <input type="checkbox" id="show_cover_pic{$key}" name="data[{$key}][show_cover_pic]" {notempty name="$vo.show_cover_pic"} checked="checked" {/notempty} value="{$vo.show_cover_pic}">
                            封面图片显示在正文中
                        </label>
                    </div>

                    <div class="editor-content">
                        <label>正文<span class="prompt">（必填）</span></label>
                        <div id="editor" class="edui-default">
                            <textarea class="span12 ckeditor" id="intro_{$key}" name="data[{$key}][intro]">{$vo.intro}</textarea>
                            <div class="opt-moreOper" style="margin-top: 20px;">
                                <p>
                                    <a href="javascript:void(0);" onclick="remote_to_local({$key});" class="ncap-btn2">远程图片本地化</a>&nbsp;
                                    <a href="javascript:void(0);" onclick="replace_links({$key});"
                                       class="ncap-btn2">清除非本站链接</a>&nbsp;
                                </p>
                            </div>
                        </div>
                    </div>

                    <div class="editor-url">
                        <label>原文链接<span class="prompt">（选填）</span></label>
                        <input id="original_url{$key}" placeholder="例：http://www.example.com" maxlength="100" class="layui-input" name="data[{$key}][original_url]" value="{$vo.original_url}">
                    </div>

                    <script type="text/javascript">
                        var ue_intro_{$key} = UE.getEditor('intro_{$key}', {
                            serverUrl: ueditor_url,
                            zIndex: 999,
                            initialFrameWidth: "100%", //初化宽度
                            initialFrameHeight: 450, //初化高度
                            focus: false, //初始化时，是否让编辑器获得焦点true或false
                            maximumWords: 99999,
                            removeFormatAttributes: 'class,style,lang,width,height,align,hspace,valign',//允许的最大字符数 'fullscreen',
                            pasteplain: false, //是否默认为纯文本粘贴。false为不使用纯文本粘贴，true为使用纯文本粘贴
                            autoHeightEnabled: false,
                            toolbars: ueditor_toolbars
                        });

                        //必须在提交前渲染编辑器;
                        function intro_{$key}() {
                            //判断编辑模式状态:0表示【源代码】HTML视图；1是【设计】视图,即可见即所得；-1表示不可用
                            if (UE.getEditor("intro_{$key}").queryCommandState('source') != 0) {
                                UE.getEditor("intro_{$key}").execCommand('source'); //切换到【设计】视图
                            }
                        }

                        function call_back_{$key}(fileurl_tmp)
                        {
                            call_back({$key},fileurl_tmp);
                        }
                    </script>
                </div>
            {/volist}

            </div>
        </div>
    </form>
</div>
<script type="text/javascript">
    // 判断输入框是否为空
    function formSubmit(){
        layer_loading('正在处理');
        var url = "{:url('Gzh/material_pictext_edit')}";
        $.ajax({
            type: 'POST',
            url: url,
            data: $("#post_form").serialize(),
            dataType: 'json',
            success: function(res) {
                layer.closeAll();
                if (res.code == 1) {
                    layer.msg(res.msg, {icon: 1, time:1000}, function(){
                        location.href = "{:url('Gzh/material_list_pictext')}"
                    });
                } else {
                    layer.msg(res.msg, {icon: 5});
                }
            },
            error:function (e) {
                layer.alert(e.responseText);
            }
        });
    }

    $(function () {
        var ori_length = "{$info|count}";
        ori_length = ori_length - 1;
        // 监听新增按钮的点击事件
        $('#add-new-item').click(function (e) {
            e.preventDefault();

            var length = $(".graphic-message-list li").length;
            var n = $(".graphic-message-list li:last").eq(0).data('n') + 1;
            if (n <= ori_length) n = ori_length + 1;
            if (length < 8) {
                var html = '<li class="li'+n+'" data-n="'+n+'" onclick="change_li(this,'+n+');">' +
                    '<div class="div_content">\n' +
                    '<div class="empty-img empty-img'+n+'"><span class="empty-hint">缩略图</span></div>' +
                    '<div class="mask-layer"></div>' +
                    '<h4 class="title"><span id="show_title'+n+'">标题</span></h4>' +
                    '</div>' +
                    '<div class="action">' +
                    '<span class="edit" onclick="change_li(this,'+n+');">编辑</span>' +
                    '<span class="delete" onclick="del_li(this,'+n+');">删除</span>' +
                    '</div>' +
                    '</li>';
                // 将新的li元素添加到ul列表中
                $('.graphic-message-list').append(html);
            }
            add_li(n);
        });

    });

    function change_li(obj,cur) {
        $(".graphic-message-list li").removeClass('on');
        $(".editor-box").hide();
        $('.li'+cur).eq(0).addClass('on');
        $(".editor-box_" + cur).show();
    }

    function del_li(obj,cur) {
        $(".graphic-message-list .li"+cur).remove();
        $(".editor-box_"+cur).remove();
    }

</script>
<script src="__SKIN__/js/gzh/material.js?v={$version}"></script>
<script>
    // 远程图片本地化
    function remote_to_local(num) {
        var body = UE.getEditor("intro_" + num).getContent();
        layer_loading('下载中');
        $.ajax({
            type: 'POST',
            url: "{:url('Archives/ajax_remote_to_local')}",
            data: {body: body, _ajax: 1},
            dataType: "JSON",
            success: function (res) {
                layer.closeAll();
                if (res.code == 1) {
                    UE.getEditor("intro_" + num).setContent(res.data.body);
                    layer.msg(res.msg, {icon: 1, time: 1000});
                } else {
                    showErrorMsg(res.msg);
                }
            },
            error: function (e) {
                layer.closeAll();
                showErrorMsg(res.msg);
            }
        });
    }

    // 清除非本站链接
    function replace_links() {
        var body = UE.getEditor("intro_" + num).getContent();
        layer_loading('正在处理');
        $.ajax({
            type: 'POST',
            url: "{:url('Archives/ajax_replace_links')}",
            data: {body: body, _ajax: 1},
            dataType: "JSON",
            success: function (res) {
                layer.closeAll();
                if (res.code == 1) {
                    UE.getEditor("intro_" + num).setContent(res.data.body);
                    layer.msg(res.msg, {icon: 1, time: 1000});
                } else {
                    showErrorMsg(res.msg);
                }
            },
            error: function (e) {
                layer.closeAll();
                showErrorMsg(res.msg);
            }
        });
    }
</script>
{include file="public/footer" /}